<template>
  <div class="digital-human">
    <!-- 视频元素被隐藏 -->
    <video ref="videoElement" src="../assets/video/1717658488515_3480.webm" autoplay muted preload="auto" playsinline
           disablePictureInPicture webkit-playsinline="true" x5-video-player-type="h5" x-webkit-airplay="true"
           @loadeddata="handleVideoLoadedData" @ended="handleVideoEnded"></video>
    <canvas ref="canvasElement"></canvas>
    <!-- 声音开关按钮 -->
    <div v-if="!isMuted" id="mute-btn" class="mute-button" @click="mutedLoad"></div>
    <!-- 控制播放的按钮 -->
    <!--    <button @click="togglePlay" class="play-pause-button">{{ isPlaying ? '暂停' : '播放' }}</button>-->
    <!--    <span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>-->

  </div>
</template>

<script>
import {onMounted, ref} from 'vue';

export default {
  setup() {
    const videoElement = ref(null);
    const canvasElement = ref(null);
    let isPlaying = ref(false);
    let isMuted = ref(false);
    let drawFrameRequestId = null;
    const errorMessage = ref(''); // 用于显示错误提示的状态

    const handleVideoLoadedData = () => {
      // 视频数据加载完成后，设置Canvas尺寸并开始播放
      const video = videoElement.value;
      const canvas = canvasElement.value;
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
    };

    const drawVideoFrame = () => {
      if (!isPlaying.value || videoElement.value.paused || videoElement.value.ended) {
        return;
      }
      const video = videoElement.value;
      const canvas = canvasElement.value;
      const context = canvas.getContext('2d');
      if (!context) {
        console.error("Failed to get canvas 2D context");
        errorMessage.value = "获取 Canvas 2D 上下文失败"; // 设置错误消息
        return;
      }
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      drawFrameRequestId = requestAnimationFrame(drawVideoFrame);
    };

    const handleVideoEnded = () => {
      isPlaying.value = false;
    };

    const baiduBrowser = () => {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      // 检查是否包含移动设备的标识（如Android、iPhone等）
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
      // 检查是否包含百度浏览器的标识
      const isBaiduBrowser = /Baidubrowser/i.test(userAgent);
      return isMobile && isBaiduBrowser;
    }

    const mutedLoad = () => {
      const isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent); // 判断是否是微信浏览器
      const isBaiduBrowser = baiduBrowser(); // 判断是否是移动端百度浏览器
      //const isChromeBrowser = /Chrome|Chromium/i.test(navigator.userAgent);
      if (isWeixinBrowser || isBaiduBrowser) {
        togglePlay();
        isMuted.value = true;
      } else {
        if (videoElement.value.muted) {
          isMuted.value = true;
          videoElement.value.muted = false; // 取消静音
        } else {
          videoElement.value.muted = true; // 静音
        }
      }
    }

    const togglePlay = () => {
      if (videoElement.value.paused || videoElement.value.ended) {
        videoElement.value.loop = true;
        videoElement.value.play();
        isPlaying.value = true;
        drawVideoFrame();
      } else {
        videoElement.value.pause();
        isPlaying.value = false;
        if (drawFrameRequestId) {
          cancelAnimationFrame(drawFrameRequestId);
          drawFrameRequestId = null;
        }
      }
    };

    onMounted(() => {
      // 设置正确的布尔值，而不是字符串
      togglePlay();
    });

    return {
      videoElement,
      canvasElement,
      togglePlay,
      isPlaying,
      errorMessage,
      mutedLoad,
      isMuted,
      baiduBrowser,
      handleVideoEnded,
      handleVideoLoadedData,
    };
  },
};
</script>
<style scoped>
video {
  display: none;
}

.digital-human {
  position: relative;
  width: 90vw; /* 使用相对宽度以适应各种设备 */
  max-width: 360px; /* 最大宽度，防止过大 */
  height: 60vh; /* 高度相对视口的高度 */
  max-height: 640px; /* 最大高度，防止过大 */
  background: transparent; /* 保持透明背景 */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

canvas {
  //display: block;
  //margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* 保持视频背景透明 */
}

.play-pause-button {
  position: absolute;
  top: 10px; /* 距离容器顶部的距离 */
  left: 10px; /* 距离容器左侧的距离 */
  padding: 10px 20px; /* 内边距 */
  background-color: #007bff; /* 背景颜色 */
  color: white; /* 文本颜色 */
  border: none; /* 去除边框 */
  border-radius: 5px; /* 边框圆角 */
  cursor: pointer; /* 鼠标悬停时的指针样式 */
  outline: none; /* 去除点击时的轮廓 */
}

.mute-button {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url('https://sjzz.ilhjy.cn/uimg/202405/14/1715651036930_3480.png');
  background-size: cover;
  background-position: center;
  cursor: pointer;
  animation: pulse 2s infinite; /* 添加脉冲动画 */
}

.play-pause-button:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

.error-message {
  margin-left: 10px;
  color: red; /* 错误消息的颜色 */
  font-size: 14px; /* 字体大小 */
}
</style>